﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/qlqa.Master" Inherits="System.Web.Mvc.ViewPage<qlqa.Models.Form.TableForm.TableForm>" %>

<%@ Import Namespace="qlqa.Delegate.CommonDelegate" %>
<%@ Import Namespace="qlqa.Models.LinQ" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Quản lý bàn ăn
</asp:Content>
<asp:Content ID="ContentCss" ContentPlaceHolderID="CustomCss" runat="server">
    <style type="text/css">
        .addNew
        {
            cursor: pointer;
        }
        .big
        {
            font-size: 10em;
        }
        .thumbnail
        {
            margin-bottom: 3px;
        }
        .thumbnailName
        {
            background-color: rgb(255, 255, 255);
            font-size: 15px;
            font-weight: bold;
            text-align: center;
            -ms-border-radius: 2px;
            border-radius: 2px;
        }
        .labelOnTable {
            font-weight: bold;
            color: #000;
            padding: 10px;
            width: 100%;
        }
        .margin-top {
            margin-top: 10px;
        }
        .colorBlue {
            color: #0000ff;
        }
        #QuickEditTable
        {
            margin-left: 5px;
            cursor: pointer;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% var commonDelegate = new CommonDelegate(); %>
    <div class="panel-heading">
        <div class="panel-title">
            <i class="fa fa-pencil"></i>Quản lý bàn ăn
                <div style="margin-left: 10px;display: inline">
                    <span class="label label-primary margin-right-sm">Trống</span>
                    <span class="label label-warning margin-right-sm">Đặt</span>
                    <span class="label label-danger margin-right-sm">Đang dùng</span>
                </div>
            </div>
        <div class="pull-right">
            <button class="btn btn-blue" type="button" data-target="#ModalAddNewTable" data-toggle="modal">
                Thêm bàn</button>
        </div>
    </div>
    <% if (Model.ListTable == null || !Model.ListTable.Any())
       {
    %>
    <div class="alert alert-info addNew" id="divAddNewTable" data-target="#ModalAddNewTable" data-toggle="modal">
        Chưa có bàn ăn! Ấn chọn để thêm bàn ăn!</div>
    <%
        }
       else
       {
    %>
    <div class="row" id="DanhSachBan">
        <%
            foreach (tb_Ban item in Model.ListTable)
            {
                if (item.IsSuDung == true)
                {
                %>
                <div class="col-xs-4 col-sm-2 margin-top addNew" title="<%= item.GhiChu %>">
                    <span class="pull-left labelOnTable" name="spanTrangThaiSuDung"><%= commonDelegate.GetMetaName(item.TrangThaiSuDung??0) %></span>
                    <input type="hidden" name="TrangThaiSuDung<%= item.Id %>" value="<%= item.TrangThaiSuDung %>"/>
                    
                    <a class="thumbnail" id="divTrangThaiSuDung<%= item.Id %>" onclick="DatMon(<%= item.Id %>)">
                        <img alt="" data-src="/Content/vendor/bootstrap/holder.js/100%x120/auto/textmode:exact"
                            style="height: 70px; width: 100%; display: block;" src="">
                    </a>
                    <div class="thumbnailName">
                        <%= item.Ten %>
                        <img src="/Content/img/Pencil-icon.png" id="QuickEditTable" onclick="XemBan(<%= item.Id %>)"
                            data-target="#ModalEditTable" data-toggle="modal" />
                    </div>
                </div>
                <%
                }
            }
        %>
    </div>
    <%
        } %>
       
    <div class="row">
        <hr style="border: 1px solid"/>
        <%
            if (Model.ListTable != null && Model.ListTable.Any())
            {
                foreach (tb_Ban item in Model.ListTable)
                {
                    if (item.IsSuDung == null || item.IsSuDung == false)
                    {
        %>
            <div class="col-xs-4 col-sm-2 margin-top" >
                <input type="hidden" name="TrangThaiSuDung<%= item.Id %>" value="<%= item.TrangThaiSuDung %>"/>
                <a class="thumbnail" id="divTrangThaiSuDung<%= item.Id %>" >
                    <img alt="Không sử dụng" data-src="/Content/vendor/bootstrap/holder.js/100%x120/auto/textmode:exact"
                            style="height: 70px; width: 100%; display: block;" src="">
                </a>
                <div class="thumbnailName" data-toggle="tooltip" title="<%= item.GhiChu %>">
                    <%= item.Ten %>
                    <img src="/Content/img/Pencil-icon.png" id="Img1" onclick=" XemBan(<%= item.Id %>) "
                            data-target="#ModalEditTable" data-toggle="modal" />
                </div>
            </div>
        <%
               }
           }
       }
        %>
    </div>

    <div aria-hidden="true" role="dialog" tabindex="-1" id="ModalAddNewTable" class="modal fade"
        style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                        ×</button>
                    <h4 class="modal-title">
                        Thêm bàn</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="Nhập tên..." id="TableName" /><br />
                    <input type="text" class="form-control" placeholder="Nhập ghi chú..." id="TableDes" /><br />
                    <fieldset id="checkArray">
                        <label class="checkbox-inline">
                            <span>Sử dụng</span><input type="checkbox" name="chk[]" checked="checked" class="checkbox"
                                id="TableUsed" style="min-height: 0; margin-left: 0; margin-right: 5px;" />
                        </label>
                    </fieldset>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">
                        Đóng</button>
                    <button data-dismiss="modal" class="btn btn-primary" type="button" id="btnThem">
                        Thêm</button>
                </div>
            </div>
        </div>
    </div>
    <div aria-hidden="true" role="dialog" tabindex="-1" id="ModalEditTable" class="modal fade"
        style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                        ×</button>
                    <h4 class="modal-title">
                        Chi tiết bàn</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="Nhập tên..." id="editTableName" /><br />
                    <input type="text" class="form-control" placeholder="Nhập ghi chú..." id="editTableDes" /><br />
                    <select id="SelectTrangThai"></select>
                    <fieldset id="editCheckArray">
                        <label class="checkbox-inline">
                            <span>Sử dụng</span><input type="checkbox" name="chk[]" checked="checked" class="checkbox"
                                id="editTableUsed" style="min-height: 0; margin-left: 0; margin-right: 5px;" />
                        </label>
                    </fieldset>
                    <input type="hidden" id="IdBan"/><br />
                </div>
                <div class="modal-footer">
                     <button data-dismiss="modal" class="btn btn-warning" type="button">
                        Xóa Bàn</button>
                    <button data-dismiss="modal" class="btn btn-default" type="button">
                        Đóng</button>
                    <button data-dismiss="modal" class="btn btn-primary" type="button" id="btnSua">
                        Sửa</button>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="ContentScript" ContentPlaceHolderID="CustomScript" runat="server">
    <script type="text/javascript">
        function ClearData() {
            $("#TableName").val("");
            $("#TableDes").val("");
            $('input[name="chk[]"]').attr("checked", "checked");
            $("#SelectTrangThai").html("");
            $("#editTableName").val("");
            $("#editTableDes").val("");
        }

        function DatMon(id) {
            window.location.href = "/Table/Order/" + id;
        }

        function ThemBan() {
            var ten = $("#TableName").val();
            var ghichu = $("#TableDes").val();
            var sudung = 1;
            if ($("#editTableUsed:checked").length > 0) {
                sudung = 1;
            } else sudung = 0;
            $.ajax({
                url: "/Table/InsertTable",
                type: "post",
                data: { ten: ten, ghichu: ghichu, sudung: sudung },
                success: function (data) {
                    if (data == true) {
                        alert("Thêm bàn thành công!");
                        window.location.reload();
                    }
                },
                error: function () {
                    alert("Thêm bàn thất bại!");
                }
            });
        }

        function ThemBanAjax() {
            var ten = $("#TableName").val();
            var ghichu = $("#TableDes").val();
            var sudung = 1;
            var check = $('input[name="chk[]"]:checked').length > 0;
            if (check)
                sudung = 1;
            else sudung = 0;
            $.ajax({
                url: "/Table/InsertTableAjax",
                type: "post",
                data: { ten: ten, ghichu: ghichu, sudung: sudung },
                success: function (data) {
                    alert("Thêm bàn thành công!");
                    $("#DanhSachBan").append(data);
                },
                error: function () {
                    alert("Thêm bàn thất bại!");
                }
            });
        }

        function XoaBan(id) {
            if (confirm("Chắc chắn muốn xóa bàn này?")) {
                $.ajax({
                    url: "/Table/DeleteTable",
                    type: "post",
                    data: { id: id },
                    success: function (data) {
                        if (data == true) {
                            alert("Xóa bàn thành công!");
                        } else {
                            alert("Không thể xóa bàn do bàn đang được sử dụng hoặc chưa tính tiền!");
                        }
                    },
                    error: function () { }
                });
            }
        }

        function XemBan(id) {
            $.ajax({
                url: "/Table/InfoTable",
                type: "post",
                data: { id: id },
                success: function (data) {
                    $("#IdBan").val(data.id);
                    $("#editTableName").val(data.ten);
                    $("#editTableDes").val(data.ghichu);
                    var x = document.getElementById("SelectTrangThai");
                    $.each(data.list, function (index, val) {
                        var option = document.createElement("option");
                        option.text = val.Text;
                        option.value = val.Value;
                        x.add(option);
//                        $('#SelectTrangThai')
//                            .append($("<option></option>")
//                                .attr("value", val.Value)
//                                .text(val.Text));
                    });

                    if (data.trangthai != undefined) {
                        x.value = data.trangthai;
                    }
                },
                error: function () {
                }
            });
        }

        function EditBan() {
            var id = $("#IdBan").val();
            var ten = $("#editTableName").val();
            var ghichu = $("#editTableDes").val();
            var trangthai = $("#SelectTrangThai").val();
            var sudung = 1;
            if ($("#editTableUsed:checked").length > 0) {
                sudung = 1;
            } else sudung = 0;
     
            $.ajax({
                url: "/Table/EditTable",
                type: "post",
                data: { id: id, ten: ten, ghichu: ghichu, sudung: sudung, trangthai: trangthai },
                success: function (data) {
                    if (data.res == true) {
                        if (data.trangthai == 1) {
                            $("#divTrangThaiSuDung" + id).css("background-color", "#428bca");
                            $("#divTrangThaiSuDung" + id).next(".thumbnailName").css({ "background-color": "#428bca", "color": "white" });
                        } else if (data.trangthai == 2) {
                            $("#divTrangThaiSuDung" + id).css("background-color", "#d9534f");
                            $("#divTrangThaiSuDung" + id).next(".thumbnailName").css({ "background-color": "#d9534f", "color": "white" });
                        } else if (data.trangthai == 3) {
                            $("#divTrangThaiSuDung" + id).css("background-color", "#f0ad4e");
                            $("#divTrangThaiSuDung" + id).next(".thumbnailName").css({ "background-color": "#f0ad4e", "color": "white" });
                        } else {
                            $("#divTrangThaiSuDung" + id).css("background-color", "white");
                        }

                        window.location.reload();
                    } else {
                        alert("Không thể sửa bàn do đang sử dụng!");
                    }
                },
                error: function () {
                    alert("Cập nhật thất bại!");
                }
            });
        }

        function XemGhiChuBan(str) {
            
        }

        $(document).ready(function () {
            
            $.each($("input[name^='TrangThaiSuDung']"), function(i, elem) {
                //alert($(elem).val());
                var value = $(elem).val();
                if (value == 1) {
                    $(elem).next().css("background-color", "#428bca");
                    $(elem).next().next(".thumbnailName").css({ "background-color": "#428bca", "color": "white" });
                } else if (value == 2) {
                    $(elem).next().css("background-color", "#d9534f");
                    $(elem).next().next(".thumbnailName").css({ "background-color": "#d9534f", "color": "white" });
                } else if (value == 3) {
                    $(elem).next().css("background-color", "#f0ad4e");
                    $(elem).next().next(".thumbnailName").css({ "background-color":"#f0ad4e", "color":"white" });
                } else {
                    $(elem).next().css("background-color", "white"); 
                    $(elem).next().next(".thumbnailName").css("background-color", "white");
                }
            });

            $("#btnThem").click(function () {
                ThemBanAjax();
                ClearData();
            });

            $("#btnSua").click(function() {
                EditBan();
                ClearData();
            });

            
        });
    </script>
</asp:Content>
